{literal}
<script type="text/javascript">
	$(document).ready(function() {

		$('#profeForm').bootstrapValidator({
			fields : {
				nombre : {
					validators : {
						
						notEmpty : {
							message : 'Ingrese un nombre por favor'
						}
					}
				}				
			}
		});
		$("#nuevaBtn").click(
				function() {
					$('#modalLabel').html('Nuevo profesor');
					$('#accion').val("alta");
					$('#idProfe').val("");
					$('#nombre').val("");
					$('#activo').prop('checked', false);
					$('#profeModal').modal();
					$("#idProfeDiv").hide();
				    	
				});
		$("#deleteBtn").click(
				function() {
					var id = $("#idProfe").val();
					// Returns successful data submission message when the entered information is stored in database.
					var dataString = 'idProfe=' + id;
//								+ '&accion=' + accion;
					$.ajax({
						type : "POST",
						url : "profesor.php?operacion=delete",
						data : dataString,
						cache : false,
						success : function(result) {
							var deleteProfeJson = jQuery.parseJSON( result );
							$("#tablaa").bootstrapTable('remove', {
					            field: 'id',
					            values: id
					        });
							$('#deleteModal').modal('toggle');

						}
					});
					return false;
				});	
		$("#confirmar").click(
				function() {
					$('#profeForm')
					.data('bootstrapValidator').validate();
					if(!$('#profeForm')
							.data('bootstrapValidator').isValid()){
						return;
					}
					var id = $("#idProfe").val();
					var nombre = $("#nombre").val();
					var activo = $("#activo").prop( "checked" );
					var accion = $("#accion").val();
					// Returns successful data submission message when the entered information is stored in database.
					var dataString = 'idProfe=' + id + '&activo='
							+ activo + '&nombre=' + nombre;
					$.ajax({
						type : "POST",
						url : "profesor.php?operacion="+accion,
						data : dataString,
						cache : false,
						success : function(result) {
							var newProfeJson = jQuery.parseJSON( result );
							if(accion == 'alta'){
								$("#tablaa").bootstrapTable('insertRow', {
						            index: 0,
						            row: newProfeJson
						        });
							}else{
								$("#tablaa").bootstrapTable('updateRow', {
						            index: indice,
						            row: newProfeJson
						        });
							}
							$('#profeModal').modal('toggle');
							

						}
					});
					return false;
				});	
	});

	function editar(id){
		$('#modalLabel').html('Editar profesor Nro ' + id );
		var dataString = 'idProfe=' + id;
	$.ajax({
	type : "POST",
	url : "profesor.php?operacion=getById",
	data : dataString,
	cache : false,
	success : function(result) {
		var profeJson = jQuery.parseJSON( result );
		$('#accion').val("update");
		$('#idProfe').val(profeJson.id);
		$('#nombre').val(profeJson.nombre);
		if(profeJson.activo === 'S'){
			$('#activo').prop('checked', true);
		}
		
		$("#idProfeDiv").show();
	}
	});
		
		$('#profeModal').modal("show");	
	}

	function eliminar(id){
		$('#idDelete').html(id);
		$('#idProfe').val(id);
		$('#deleteModal').modal("show");	
	}
	$('body').on('hidden.bs.modal', '.modal', function () {
	    $(this).removeData('bs.modal');
	});
	
	function operateFormatter(value, row, index) {
	    return [
	        '<a class="edit" href="javascript:void(0)" title="Editar">',
	        '<i class="glyphicon glyphicon-edit"></i>',
	        '</a>  ',
	        '<a class="remove" href="javascript:void(0)" title="Eliminar">',
	        '<i class="glyphicon glyphicon-remove"></i>',
	        '</a>'
	    ].join('');
	}
	window.operateEvents = {
	    'click .edit': function (e, value, row, index) {
	    	indice = index;
	        editar(row.id);
	    },
	    'click .remove': function (e, value, row, index) {
	        eliminar(row.id);
	    }
	};
</script>

{/literal}
<div id="toolbar">
<button id=nuevaBtn type="button" class="btn btn-primary">Nuevo
				profesor</button>
</div>
<table data-toggle="table"
       data-toolbar="#toolbar"
       data-url="profesor.php?operacion=getAll" id="tablaa" 
       data-show-refresh="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-height="350"
       class="table table-striped">
    <thead>
    <tr>
        <th data-field="id">ID</th>
        <th data-field="nombre">Nombre</th>
        <th data-field="activo" data-formatter="siNoFormatter">Activo</th>
        <th data-field="alta">Fecha de alta</th>
        <th data-formatter="operateFormatter" data-events="operateEvents"></th>
    </tr>
    </thead>
</table>

<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="1" role="dialog"
	aria-labelledby="deleteModalLabelled" aria-hidden="true">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title">Eliminar...</h4>
			</div>
			<div class="modal-body">
				Esta seguro que desea eliminar el profesor nro <span
					id="idDelete"></span>
			</div>

			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
				<button type="button" class="btn btn-danger" id="deleteBtn">Eliminar</button>
			</div>
		</div>
	</div>
</div>
<!-- Modal -->
<div class="modal fade" id="profeModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title" id="modalLabel"></h4>
			</div>
			<div class="modal-body">


				<form role="form" action="profesor.php" id="profeForm"
					method="post">

					<input type="hidden" id="accion" name="accion">
					<div class="form-group" id="idProfeDiv" style="display: none;">
						<label for="idProfe">ID</label> <input type="text"
							class="form-control" id="idProfe" name="idProfe" disabled>
					</div>

					<div class="form-group">
						<label for="descripcion">Nombre</label> <input
							type="text" class="form-control" id="nombre"
							name="nombre" placeholder="Ingrese el nombre">
					</div>
					<div class="form-group" style="padding-bottom: 10px;">
					<label for="activo" class="col-lg-2 control-label" style="padding-left: 3px;">Activo</label>
					<div class="col-lg-5">
						<input type="checkbox"  id="activo"
							name="activo">
					</div></div>


				</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
					<button type="button" class="btn btn-primary" id="confirmar">Confirmar</button>
				</div>
			</div>
		</div>
	</div>